$(function () {
    // 假数据
    // var arr = ["耐克", "李宁", "新百伦", "耐克王", "阿迪王"];
    // localStorage.setItem('search', JSON.stringify(arr))
    // 1- 历史记录动态渲染 
    // 去本地去数据  + 模板渲染 
    function render() {
        // 获取localStorage中的search本地数据
        // 获取的是一个字符串 ，需要使用JSON.parse方法转换成数组，并且如果search内没有数据默认为[]
        var arr = JSON.parse(localStorage.getItem('search')) || [];
        // 渲染需要使用到对象
        var obj = {
            list: arr
        }
        // 渲染页面
        $('.search-content').html(template('tmp', obj))
    }
    render();

    // 2- 清空历史记录 
    // 2-1点击清空历史按钮，先弹出确认框
    // 2-2如果确定删除，就去本地，删除search对应的数据
    // 2-3删除完成后，页面要重新渲染
    // 因为使用到模板，动态渲染，所以需要使用绑定事件
    $('.search-content').on('click', '.his-clear', () => {
        mui.confirm('确定要清空历史记录吗？', '警告', ['再想想', '狠心清空'], e => {
            console.log(e);
            if (e.index == 1) {
                // 删除search对应的数据
                localStorage.removeItem('search');
                // 重新渲染
                render();
            }
        })
    })

    // 3 - 删除一条历史记录
    // 3.1点击删除按钮，获取当前数据下标，弹出确认框
    // 3.2如果确定删除，根据id删除对应的数据
        // 数据已经字符串的形式，永久存储，以数组形态进行操作
    // 步骤: 1.先取出json字符串，转出数组
    //       2.从数组中进行删除
    //       3.从数组中删除后，在把数组转回字符串，存回到本地
    //       4.删除完成后，页面重新渲染
    $('.search-content').on('click','.his-del',function(){
        // console.log( '111' );
        // 获取当前数据下标
        var index = $(this).data('index')
        // console.log( index );
        // 调用mui 弹窗方法
        mui.confirm('确定要删除吗？','提示',['取消','确定'],e=>{
            // console.log( e );
            // e会返回 取消，确定按钮的 index值，根据值进行判断
            if(e.index == 1){
                // 根据获取的数据下标进行删除,选从本地取值，转出数组
                var arr=JSON.parse(localStorage.getItem('search'))
                // console.log( arr );
                // 根据下标删除,使用splice方法
                arr.splice(index,1)
                console.log( arr );
                // 然后再把数组转成字符串格式存入本地，使用JSON.stringify方法
                localStorage.setItem('search',JSON.stringify(arr))
                // 最后页面再进行重新渲染
                render();
            }
        })
    })
    // 4- 添加历史记录 
    // 4.1点击搜索按钮，获取输入框的值，判断是否为空，为空提示错误，到此结束
    // 4.2如果数据不为空，将输入的内容添加到 本地（向数组的最前面添加）
    //      数据以及字符串的形式 永久存储，以数组形态进行操作
    //          1.先取出json字符串，转成数组
    //          2.向数组中进行添加
    //          3.从数组中添加后，在把数组转回字符串，存回到本地
    // 4.3页面重新渲染
    // 注意点：
    //  1.历史记录只保留最近的6条
    //  2.历史记录中不能有重复的

    $('.search-btn').on('click',()=>{
        // console.log( '111' );
        // 获取input输入框内的值
        var txt = $('.search-txt').val()
        // 进行判断
        if(txt.trim().length == 0){
            // console.log( '请输入关键字' );
            // 使用mui自带的消息框toast
            mui.toast('请输入关键字!',{ duration:'short', type:'div' })
            return;
        }
        // 添加
        // 1.先取出json字符串，转成数组
        var arr = JSON.parse(localStorage.getItem('search')) || []
        console.log( arr );
        // 2.去重： 在新记录添加之前，先查找本地是否有重复项，如果有先删除重复项，在添加新记录
        // arr.indexOf(b), 查找b在数组中的下标，如果找到返回下标，找不到返回-1 
        var index = arr.indexOf(txt);
        if(index > -1){
            // 如果有先删除重复性，再添加新纪录
            arr.splice(index,1)
        }
        // 3.向数组前面添加txt内的数据
        arr.unshift(txt)
        console.log( arr );
        // 4.在添加了新的历史记录后，判断数组长度是否越界（超过6条）如果超过，删除最后一条
        if(arr.length > 6){
            arr.pop();
        }
        console.log( arr );
        // 5.把数组转回字符串，添加到本地存储
        localStorage.setItem('search',JSON.stringify(arr))
        // 重新渲染
        render();
        // 清空输入框内容
        $('.search-txt').val('')
        // 跳转到搜索列表页 搜索对应商品
        location.href='searchList.html?key='+txt;
    })

})